<template>
    <div class="header c-b-b c-f-h c-f-between-center c-p-h-m">
        <h2 class="brand c-m-0">
            <a href="/">
                <img src="../assets/img/aos4v.svg" alt />
                <span>AOS4V</span>
            </a>
        </h2>
        <a-input-search
            color="success"
            :searchFunc="searchFunc"
            :getTextFunc="(a) => a.name"
            :getValueFunc="(a) => a.id"
            placeholder="搜索"
            @itemClick="itemClick"
        />
    </div>
</template>

<style lang="scss" scoped>
.header {
    box-sizing: border-box;

    .brand {
        a {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #000;
            img {
                width: 48px;
                height: 48px;
            }
        }
    }
}
</style>

<script>
import Fuse from 'fuse.js'
import { menuItems } from '../componentIndex'
export default {
    data() {
        return {
            searchKey: '',
            menuItems: menuItems
        }
    },
    computed: {
        itemList: function () {
            let itemList = []
            this.menuItems.forEach(a => this.getItemList(a, itemList))

            return itemList
        },
        fuseInstance() {
            let fuse = new Fuse(this.itemList, {
                shouldSort: true,
                threshold: 0.5,
                location: 0,
                distance: 100,
                maxPatternLength: 32,
                minMatchCharLength: 1,
                keys: [
                    "name"
                ]
            })

            return fuse
        },
    },
    methods: {
        getItemList(item, list) {
            if (item.type == 0) {
                item.files.forEach(a => {
                    this.getItemList(a, list)
                })
            } else {
                list.push(item)
            }
        },
        searchFunc(displayText) {
            if (!displayText) {
                return []
            }
            return this.fuseInstance.search(displayText).map(a => a.item)
        },
        itemClick(item) {
            this.$router.push(item.path)
        }
    }
}
</script>